<template>
  <div id="app">
    <div>
      <div class="header">
        <img src="http://www.gzoaktreeinv.com/wp-content/uploads/2022/01/2e1369fd979bf11eba1ecd6d3ff8f92b.png" alt="">
        <ul>
          <li>
            <router-link :to="{ name: 'shouye' }">首页</router-link>
          </li>
          <li>
            <router-link :to="{ name: 'jianjie' }">公司简介</router-link>
          </li>
          <li>
            <router-link :to="{ name: 'tuandui' }">橡树团队</router-link>
          </li>
          <li>
            <router-link :to="{ name: 'dongtai' }">发展动态</router-link>
          </li>
          <li>
            <router-link :to="{ name: 'hezuo' }">合作企业</router-link>
          </li>
          <li>
            <router-link :to="{ name: 'lianxi' }">联系方式</router-link>
          </li>
        </ul>
      </div>
      <router-view></router-view>
    </div>
    <bottom></bottom>
  </div>
</template>

<script>
import Bottom from './components/Bottom.vue';
export default {
  name: 'App',
  components: {
    Bottom
  }
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.header {
  z-index: 999;
  height: 120px;
  width: 100%;
  background-color: black;
  opacity: 0.7;
  position: fixed;
  line-height: 110px;

  img {
    height: 80px;
    margin-top: 20px;
    margin-left: 40px;
  }

  ul {
    overflow: hidden;
    float: right;
    margin-right: 50px;

    li {
      float: left;
      margin-right: 60px;

      a {
        color: white;
        font-size: 22px;
        font-weight: 700;
      }
    }
  }
}
</style>
